<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>花样连接卡</title>
		<style type="text/css">
			#box {
				width: 300px;
				height: 300px;
				padding: 10px;
				border: 2px solid red;
			}
			
			a {
				width: 100px;
				height: 100px;
				display: block;
				background-color: pink;
				text-align: center;
				text-decoration: none;
				line-height: 100px;
				color: white;
			}
			
			a:hover {
				background: blue;
			}
			
			.a2 {
				position: relative;
				top: -100px;
				left: 200px;
			}
			
			.a3 {
				position: relative;
				top: -100px;
				left: 100px;
			}
			
			.a4 {
				position: relative;
				top: -100px;
			}
			
			.a5 {
				position: relative;
				top: -200px;
				left: 200px;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<a class="a1" href="#">链接1</a>
			<a class="a2" href="#">链接2</a>
			<a class="a3" href="#">链接3</a>
			<a class="a4" href="#">链接4</a>
			<a class="a5" href="#">链接5</a>
		</div>

	</body>

</html>